<!-- 表格重载条件区 -->
<div id="groupList-form">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>

<!-- 表格内容区 -->
<table class="layui-hide" id="groupList-table" lay-filter="">

</table>

<script>
    var idPrefix = "groupList"
    var tableId = idPrefix + '-table';
    var formId = idPrefix + '-form';

    var $currForm = $('#' + formId);
    var $currTable = $('#' + tableId);
    var tblrdm;
    layui.use(['jquery', 'bmsrdm'], function () {
        var $ = layui.$;
        tblrdm = layui.bmsrdm.randomTable('BMSGroup-', 10);
        // 在 table init 前，自动生成表格ID
        // tableFilter 表格事件的过滤器
        $currTable.attr('lay-filter', tblrdm.tableFilter);
        // tableElemId表格的元素ID
        $currTable.attr('')
        // reloadTblId 表格的重载标识ID
        // reloadBtnId 提交搜索id
        // tableBarId 表格工具样ID

        // 从标签中获取数据源地址
    })

    layui.use(['jquery', 'form', 'table', 'laydate', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.$

        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            , url: '/group/list.do'
            , cols: [[
                {checkbox: true, fixed: true}
                , {field: 'id', title: 'ID', width: 80, sort: true, fixed: true}
                , {field: 'name', title: '名称', width: 150}
                , {field: 'sort', title: '排序', width: 150}
                , {field: 'status', title: '状态', enums: {1: '正常', 0: '锁定'}, width: 150}
                , {
                    field: 'createtime',
                    title: '创建时间',
                    date: true,
                    width: 300,
                    date: true,
                    dateFormat: 'yyyy-MM-dd HH:mm:ss'
                }
                , {fixed: 'right', width: 150, align: 'center', toolbar: '#tableBar'}
            ]]
            , id: 'testReload'
            , page: true
            , request: {
                pageName: BMS.config.keys.pager.pageNum
                , limitName: BMS.config.keys.pager.pageSize
            }
            , response: {
                statusName: BMS.config.keys.codeName
                , statusCode: BMS.config.code.succ// 成功状态码
                , msgName: BMS.config.keys.msgName
                , countName: BMS.config.keys.pager.totalCount
                , dataName: BMS.config.keys.dataName
            }
        });

        var active = {
            reload: function () {
                var demoReload = $('#demoReload');

                table.reload('testReload', {
                    where: {
                        name: demoReload.val()
                    }
                });
            }
        };

        $('#'+tableId+' .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //监听工具条
        //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        table.on('tool(tableFilter)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    //向服务端发送删除指令
                    layer.close(index);
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                });
            } else if (layEvent === 'edit') { //编辑
                var editData, editHtml;
                // 获取模版数据，喂给 content
                $.get('/html/group_edit.html', function(resp)
                {
                    editHtml = resp;
                    BMS.cache.param.group = {id: data.id};
                    layer.open({
                        title: '编辑'
                        , type: 1
                        , closeBtn: 2
                        , content: resp
                        , area: ['500px']
                    });
                })

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    , title: 'xxx'
                });
            }
        });
    });


</script>

<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>